<template>
  <div class="course-details-container">

    <div class="box">
      <div class="box-top">
        <div class="box-top-left">
          <img :src="course.coursePic||course.courseCover" alt="">
        </div>
        <div class="box-top-right">
          <div class="text-wrap course-name">
            <div class="text-name">课程名称：</div>
            <div class="name">{{ course.courseName }}</div>
          </div>

          <div class="text-wrap">
            <div class="text-name">QQ讨论群：</div>
            <div style="display: flex;">
              <div v-for="(qq,i) in qqGroup" :key="qq" class="qq">
                <el-tooltip class="item" effect="light" content="点击复制QQ号">
                  <div class="qq-text" @click="copyQQ(qq)" :id="'qq'+qq">{{ qq }}</div>
                </el-tooltip>
              </div>
            </div>
          </div>

          <div class="text-wrap" v-if="false">
            <div class="text-name">执教老师：</div>
            <div>{{ course.courseTeacher }}</div>
          </div>

          <div class="text-wrap">
            <div class="text-name">课程简介：</div>
            <div>{{ course.courseIntroduction }}</div>
          </div>
        </div>
      </div>

      <div class="box-body">
        <div class="box-body-left">
          <div v-for="(obj,i) in chapterList" :key="obj.chapterId" class="chapter" :id="obj.chapterId">

            <div class="chapter-box">
              <!--标题-->
              <div class="chapter-title">
                <div class="chapter-title-icon">
                  <!--                <IconAli :sty="{width:'32px',height:'32px',marginTop:'2px'}" icon='folder-line'></IconAli>-->
                </div>
                <div class="chapter-title-left">
                  第 {{ i + 1 }} 章
                </div>
                <div class="chapter-title-right">
                  {{ obj.chapterName }}
                </div>
              </div>

              <!--主体内容-->
              <div v-for="(o,j) in obj.courseDetailList" :key="o.courseDetailId" class="course-detail"
                   @click="goCourse(o)">
                <div class="course-detail-icon">
                  <IconAli :sty="{width:'26px',height:'26px',marginTop:'5px'}" icon='video'></IconAli>
                </div>
                <div class="course-detail-left">
                  {{ j + 1 }}
                </div>
                <div class="course-detail-right">
                  {{ o.courseDetailName }}
                </div>
                <div class="view-flag" v-if="Math.floor(Math.random()*200)%2==1">
                  已观看
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="box-body-right">

        </div>


      </div>
    </div>

  </div>
</template>

<script>
import IconAli from "@/views/common/IconAli";

export default {
  //组件名称
  name: "CourseDetails",
  props: [],
  //组件注册
  components: {IconAli},
  //数据驱动
  data() {
    return {
      cid: "",  //课程id
      course: {     //课程信息

      },
      qqGroup: [],
      chapterList: [],   //章节列表
    }
  },
  //计算属性
  computed: {},
  //数据监听
  watch: {},
  //方法
  methods: {
    /*  onSelect() {

      },
      onChange() {

      },*/
    //复制QQ
    copyQQ: function (qq) {
      let e = document.getElementById('qq' + qq);
      window.getSelection().selectAllChildren(e);
      document.execCommand("copy");
      this.$Message.success("QQ号已经复制到剪切板");
    },
    //去课程
    goCourse(o) {
      //跳转
      let {href} = this.$router.resolve({
        name: "CourseVideo",
        query: {
          cd_id: o.courseDetailId
        }
      });
      window.open(href, '_blank');
    },
    //查询课程详情
    selectCourseDetails() {
      this.axios.get(`/course/web/${this.cid}`)
          .then((data) => {
            this.course = data.data
            this.qqGroup = this.course.qqGroup.split(",");
          })
    },
    //查询课程列表
    selectCourseList() {
      this.axios.get(`/course/web/chapter/${this.cid}`)
          .then((data) => {
            this.chapterList = data.data
          })
    }
  },
  //钩子函数
  mounted() {
    let query = this.$route.query;
    this.cid = query.cid;

    this.selectCourseDetails();
    this.selectCourseList();
  }
}
</script>

<style lang="less" scoped>
.course-details-container {
  background-color: #EFEFEF;

  .box {
    min-width: 1200px;
    width: 1200px;
    margin: 0px auto;
    min-height: calc(100vh - 70px);
  }


  .box-top {
    border-bottom-right-radius: 6px;
    border-bottom-left-radius: 6px;
    display: flex;
    background-color: #FFF;
    height: 250px;

    .box-top-left {
      img {
        border-radius: 3px;
        margin-top: 25px;
        margin-left: 20px;
        display: inline-block;
        width: 324px;
        height: 200px;
      }
    }

    .box-top-right {
      //border: 1px solid #000000;
      margin-left: 20px;

      .text-wrap {
        display: flex;
        margin-top: 16px;

        .text-name {
          text-align: right;
          min-width: 80px !important;
        }

        .name {
          font-size: 16px;
          font-weight: bold;
          color: #F00;
        }
      }

      .course-name { //课程名称
        margin-top: 30px;
      }

      .qq {
        margin-right: 10px;
        background-color: #F7F7F7;
        padding: 0px 6px;
        border-radius: 2px;
        cursor: pointer;

        .qq-text {
        }
      }
    }
  }

  .box-body {
    border-radius: 6px;
    margin-top: 16px;
    //border: 1px solid #FFF;
    padding-top: 16px;
    display: flex;

    .box-body-left {
      border-radius: 6px;
      width: 68%;
      background-color: #FFF;
      padding-top: 16px;
    }

    .box-body-right {
      border-radius: 6px;
      margin-left: 2%;
      width: 30%;
      background-color: #FFF;
      //border: 1px solid #000000;
    }

    .chapter {
      width: 98%;
      margin-left: 1%;
      //background-color: #F7F7F7;
      //background-color: #EFEFEF;
      margin-bottom: 30px;
      border-radius: 6px;

      //章节
      .chapter-title {
        height: 40px;
        line-height: 40px;
        margin-left: 0px;
        display: flex;
        background-color: #F4F4F4;
        //border:1px solid #000000;
        //border-bottom: 1px solid #777;

        .chapter-title-icon {
          margin-left: 6px;
        }

        .chapter-title-left {
          margin-left: 6px;
          font-size: 18px;
        }

        .chapter-title-right {
          font-size: 18px;
          font-weight: bolder;
          color: #000;
          margin-left: 10px;
        }
      }

      //课程
      .course-detail {
        border: 1px solid #DDD;
        border-radius: 4px;

        cursor: pointer;
        height: 40px;
        line-height: 40px;
        margin-top: 12px;
        //margin-left: 6px;
        padding-left: 12px;
        display: flex;

        .course-detail-left {
          margin-left: 6px;
        }

        .course-detail-right {
          margin-left: 10px;
        }

        .view-flag {
          margin-left: 12px;
          font_size: 12px;
          color: #F00;
        }
      }

      .course-detail:hover {
        background-color: #EFEFEF;
        //color: #FFF;
        font-weight: bolder;
        border: 1px solid #BBB;

        .course-detail-right {
          //font-size: 16px;
        }
      }
    }

  }

}
</style>